<template>
  <div class="arceList-container">
    <video class="bg" autoplay  muted src="@/assets/bj.mp4"></video>

    <!-- 标题 -->
       <div class="header">
        <svg class="icon"
             aria-hidden="true">
          <use xlink:href="#icon-airplane-full"></use>
        </svg>

    <h3 class="arceList-title">地产列表</h3>
       </div>
    <!-- 内容 v-imgerr="imgerr" -->
    <el-card v-for="item in arceList" :key='item.id'>
      <el-row type="flex" justify="center" @click.native="getDetails(item.id)">
        <div class="card-left" >
          <img v-imgerr="require('../../assets/pepe.jpg')" :src="item.image" style="width:200px" height="200px" >
        </div>
        <div class="card-right">
          <h3>{{item.title}}</h3>
          <p>{{item.desc}}</p>
        </div>
      </el-row>
    </el-card>
    <!-- 分页器 -->
      <el-row type="flex" justify="center">
        <el-pagination
          background
          layout="prev, pager, next"
          :total='total'
          :page-size='limit'
          @current-change="handleCurrentChange"
          >
          </el-pagination>
      </el-row>
    </div>
</template>

<script>
import { arceList, arceListLength } from '@/api/arcelist'
export default {
  data () {
    return {
      // 房产列表
      arceList: [],
      // tmepArr
      tmepArr: [],
      // 房产总数
      total: 0,
      // 每页获取数量
      limit: 3,
      start: 0,
      // 当前页
      currentpage: 1,
      // 当前页的数据
      pageData: [],
      // 默认图片
      imgerr: '../../assets/pepe.jpg',
      id1: '',
      ids: ''
    }
  },
  async created () {
    const list = this.$store.state.arceList.arcrList
    const id1x = this.$store.state.arceList.id1
    const idx = this.$store.state.arceList.id
    this.id1 = id1x
    this.ids = idx
    if (list) {
      this.arceList = list
      this.total = list.length
    } else {
      this.getArceList(3)
    }
  },
  methods: {
    // 获取房产列表
    async getArceList (limit) {
      if (this.ids) {
        const res = await arceList({
          _limit: this.limit,
          _start: this.start,
          category: this.ids
        })
        this.arceList = res.data
        console.log('id', this.arceList)
        await this.getArceListLength()
      } else if (this.id1) {
        const res = await arceList({
          _limit: this.limit,
          _start: this.start,
          agent: this.id1
        })
        this.arceList = res.data
        console.log('id', this.arceList)
        await this.getArceListLength()
      } else {
        const res = await arceList({
          _limit: this.limit,
          _start: this.start
        })
        console.log('没id', res)
        this.arceList = res.data
        await this.getArceListLength()
      }
    },
    // 根据id跳转到对应的详情页面
    getDetails (id) {
      this.$store.dispatch('arce/setIdY', id)
      this.$router.push('/details')
      this.pageData = this.queryByPage()
      console.log('62', this.pageData)
    },
    // 获取房产数量
    async getArceListLength () {
      if (this.ids) {
        const res = await arceListLength({
          category: this.ids
        })
        console.log('房产数量id', this.tmepArr)
        // 房产总数
        this.total = res.data
      } else if (this.id1) {
        const res = await arceListLength({
          agent: this.id1
        })
        console.log('房产数量id', this.tmepArr)
        // 房产总数
        this.total = res.data
      } else {
        const res = await arceListLength()
        console.log('房产数量', this.tmepArr)
        // 房产总数
        this.total = res.data
      }
    },
    // 实现分页
    queryByPage () {

    },
    // 分页
    handleCurrentChange (val) {
      // this.currentpage = val
      this.start = (val - 1) * this.limit
      this.getArceList()
    }
  },
  beforeDestroy () {
    this.$store.commit('arceList/Remove_list')
    this.$store.commit('arceList/Remove_id')
    this.$store.commit('arceList/Remove_id1')
    const hou = this.$store.state.arceList.arcrList
    console.log('销毁后1', hou)
  }
}
</script>

<style lang="scss" scoped>
.header{
  display: flex;
    svg {
      fill: #fea400;
      width: 20px;
      height: 50px;
      margin-right: 10px;

  }
}
.bg{
 position: absolute;

  left: 50%;

  top: 50%;

  /*保证视频内容始终居中*/

  transform: translate(-50%, -50%);

  width: 100%;

  height: 100%;

  /*保证视频充满屏幕*/

  object-fit: cover;

  // min-height: 800px;
  z-index: -99;

}
.arceList-container{
  width: 1000px;
  margin: 0 auto;
  padding: 0;
}
.arceList-title{
  padding: 10px;
  color: #fba335;
}
.el-card::before{
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  opacity: 0.8;
  background-color: #aab4c4;
  position: absolute;
  z-index: -2;
  filter: blur(15px);
}
.el-card{
  position: relative;
  margin-bottom: 10px;
  background-color: transparent;
}
.card-left{
  padding-left: 30px;
  padding-right:50px ;
  border-right: 1px solid #f3f3f3;
}
.card-right{
  flex: 1;
  padding-left: 10px;
}
.card-right h3{
  text-align: center;
  padding-bottom: 10px;
}
</style>
